<template>
    <orh-trees :treesHead="treesHead" reload  @on-reload="refresh"
        add="zform_add" @on-add="moralAdd" 
        del="zform_del" @on-del="prompt = true">
        <Tree :data="trees" slot="trees" @on-select-change="itemChange"></Tree>
        <orh-sub-table pages :pageDate="pageDate" @on-page-change="queryData" slot="content">
            <Table :columns="columns" @on-selection-change="selectOne" :data="data" :loading="tableload" slot="table"></Table> 
        </orh-sub-table>
        <orh-sidebar v-model="show" :title="titles" scale slot="others">
            <component :is="content" :condition="condition" :items="items" @requery="requery"></component>
        </orh-sidebar>
        <Modal
            v-model="prompt"
            title="数据删除"
            :loading="loading"
            @on-ok="asyncOK"
            slot="others">
            <p>{{ cont }}</p>
        </Modal>
    </orh-trees>
</template>
                
<script>
export default {
    components: {
        Operation: resolve => {require(['./Operation.vue'], resolve);},
        FormSee: resolve => {require(['./FormSee.vue'], resolve);},
    },
    data () {
        return {
            prompt:false,
            loading: true,
            cont:'您确定要删除这些数据吗',
            show:false,
            content:null,
            titles:null,
            tableload:false,
            condition: null,
            items: null,
            pageDate: {
                total: 0,
                current_page: 1,
                per_page: 0
            },
            treesHead: {
                title: '选择值班项',
                button: false,
                button_text: '添加按钮'
            },
            data:[],
            trees:[],
            columns: [
                {
                    type: 'selection',
                    width: 55,
                    align: 'center',
                    fixed:'left'
                },
                {
                    title: '表单名',
                    width: 100,
                    fixed:'left',
                    align: 'center',
                    render: (h, params) => {
                        let name = params.row.form_public_idlongsTo[0].show_name.zh
                        return h('div', name);
                    }
                },
                {
                    title: '表单类型',
                    width: 150,
                    align: 'center',
                    key: 'type',
                    render: (h, params) => {
                        let type = params.row.type
                        let item = null
                        if(type == '1'){
                            return h('div', '普通输入框')
                        }
                        if(type == '2'){
                            return h('div', '下拉列表')
                        }
                        if(type == '3'){
                            return h('div', '单选')
                        }
                        if(type == '4'){
                            return h('div', '多选')
                        }
                        if(type == '5'){
                            return h('div', '富文本')
                        }
                        if(type == '6'){
                            return h('div', '时间选择器')
                        }
                    }
                },
                {
                    title: ' ',
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 200,
                    align: 'center',
                    render: (h, params) => {
                        let state = params.row.apijudge
                        let type = params.row.type
                        let form = params.row.fromgroup_name
                        let states = true
                        let stas = false
                        if(state == '2' && type != '1' && type != '5' && type != '6'){
                            states = false
                        }
                        if(state == '1' && form != null){
                            stas = true
                        }
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'success',
                                    size: 'small',
                                    disabled: states
                                },
                                style: {
                                    marginRight: '5px',
                                },
                                on: {
                                    click: () => {
                                        this.seeForm(params.row.form_public_id)
                                    }
                                }
                            }, '查看'),
                            h('Button', {
                                directives: [
                                    {
                                        name: 'button',
                                        value: 'zform_updata',
                                    }
                                ],
                                props: {
                                    type: 'primary',
                                    size: 'small',
                                    disabled: stas
                                },
                                style: {
                                    marginRight: '5px',
                                },
                                on: {
                                    click: () => {
                                        this.UpdateData(params.row.form_public_id)
                                    }
                                }
                            }, '编辑'),
                            h('Poptip', {
                                props: {
                                    confirm: true,
                                    transfer: true,
                                    title: '您确定要删除这条数据吗?',
                                    type: 'error',
                                    size: 'small',
                                    placement:'left-end'
                                },
                                style: {
                                    textAlign: 'left',
                                },
                                on: {
                                    'on-ok': () => {
                                        this.remove(params.row.form_public_id)
                                    }
                                }
                            }, [
                                h('Button', {
                                    directives: [
                                        {
                                            name: 'button',
                                            value: 'zform_del',
                                        }
                                    ],
                                    props: {
                                        type: 'error',
                                        size: 'small',
                                        disabled: stas
                                    }
                                }, '删除')
                            ]),
                        ]);
                    }
                },
            ],
            url:'api/watchlist/v1/watchlistfrom/list/',
            delUrl:'api/watchlist/v1/watchlistfrom/del/',

            del:null,
            menuUrl: 'api/user/v1/get/buttons?name=DutyForm',
        }
    },
    methods: {
        
        // ==================================================
        // 获取三级
        // ==================================================
        menuData(){
            this.$http.get(this.menuUrl).then(val=>{
                console.log(val)
                let datas = JSON.parse(JSON.stringify(val.data.dynamics))
                this.handleTree(datas)
            }).catch(err=>{
                if(err.code && err.code==422) {
                    this.$Message.error(err.message);
                }
            })
        },
        
        // ==================================================
        // 获取三级
        // ==================================================
        handleTree(val){
            this.trees = []
            val.forEach((item,index) =>{
                if(index == 0){
                    this.tableload = true
                    this.url = item.preload[0].condition_api
                    this.itemValue(this.url)
                    this.queryData(1)
                }
                this.trees.push({
                    title : item.alias.zh,
                    value : item.preload[0].condition_api,
                })
            })
        },
        
        // ==================================================
        // 条件查询数据
        // ==================================================
        itemValue(val){
            let str = val
            let val1 = str.indexOf('[')
            let val2 = str.indexOf(']')
            let strs = str.substring(val1 + 1,val2)
            this.items = parseInt(strs)
        },
        
        // ==================================================
        // 条件查询数据
        // ==================================================
        itemChange(val){
            if(val.length != 0){
                this.data = []
                this.tableload = true
                this.url = val[0].value
                this.itemValue(this.url)
                this.queryData(1)
            }
        },

        // ==================================================
        // 添加
        // ==================================================
        moralAdd() {
            this.condition =null
            this.titles = '添加值班项表单'
            this.show = true
            this.content = 'Operation'
        },

        // ==================================================
        // 添加
        // ==================================================
        seeForm(index) {
            this.condition = index
            this.titles = '查看值班项表单'
            this.show = true
            this.content = 'FormSee'
        },

        // ==================================================
        // 单条删除
        // ==================================================
        remove (index) {
            this.del = []
            this.del.push(index)
            this.asyncOK()
        },

        // ==================================================
        // 批量删除
        // ==================================================
        selectOne(index){
            this.del = []
            index.forEach(item => {
                this.del.push(item.watchlist_rules_id)
            });
        },

        // ==================================================
        // 执行删除
        // ==================================================
        asyncOK () {
            this.del = JSON.stringify(this.del)
            this.$http.delete(this.delUrl+this.del).then(val=>{
                this.prompt = false;
                this.queryData(this.pageDate.current_page)
            }).catch(err=>{
                if(err.code && err.code==422) {
                    this.$Message.error(err.message);
                }
            })
        },

        // ==================================================
        // 重新查询数据（当数据发生变化时）
        // ==================================================
        requery(state){
            if(state == true){
                this.show = false
                this.tableload = true
                this.queryData(this.pageDate.current_page)
            }
        },

        // ==================================================
        // 跟新
        // ==================================================
        UpdateData(index){
            this.condition = index
            this.titles = '值班项表单信息修改'
            this.show = true
            this.content = 'Operation'
        },

        // ==================================================
        // 刷新数据
        // ==================================================
        refresh(){
            this.tableload = true
            this.queryData(this.pageDate.current_page)
        },

        // ==================================================
        // 查询数据
        // ==================================================
        queryData(index){
            this.tableload = true
            this.$http.get(this.url + '?page=' +index).then(val=>{
                this.data = val.data.data
                this.tableload = false
                if(val.pages != null){
                    this.pageDate.per_page = val.pages.per_page
                    this.pageDate.total = val.pages.total
                    this.pageDate.current_page = val.pages.current_page
                }
            }).catch(err=>{
                if(err.code && err.code==422) {
                    this.$Message.error(err.message);
                }
            })
        },
    },
    mounted(){
        this.menuData()
    },
}
</script>